<template>
  <div class="account-p-wrapper">
    <PageHeader title="账号管理"> </PageHeader>
    <div class="add-button">
      <el-button type="primary" @click="handleAdd">创建</el-button>
    </div>
    <div class="table-wrapper">
      <el-table :data="data" border empty-text="暂无数据">
        <el-table-column
          type="index"
          label="序号"
          width="100px"
          align="center"
        ></el-table-column>
        <el-table-column
          align="center"
          label="账号类型"
          prop="account"
        ></el-table-column>
        <el-table-column
          align="center"
          label="账户名称"
          prop="account"
        ></el-table-column>
        <el-table-column
          align="center"
          label="密码"
          prop="password"
        ></el-table-column>
        <el-table-column align="center" label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button type="warning" @click="handleEditUser(scope.row)"
              >修改</el-button
            >
            <el-button type="danger" @click="">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="add-dialog">
      <el-dialog
        title="添加编辑用户"
        width="600px"
        v-model="dialogShow"
        @close="handleCloseDialog"
      >
        <el-form
          ref="formRef"
          :model="form"
          :rules="formRules"
          label-width="80px"
        >
          <el-form-item label="用户名" prop="account">
            <el-input
              placeholder="请填写用户名"
              :maxLength="20"
              v-model="form.account"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              show-password
              placeholder="请填写密码"
              :maxLength="20"
              v-model="form.password"
            ></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <el-select placeholder="选择用户类型" v-model="form.type">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="item in radioList"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button size="small" @click="handleCloseDialog">取 消</el-button>
            <el-button
              size="small"
              type="primary"
              @click="handleOk"
              :loading="confirmLoading"
              >确 定</el-button
            >
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getUserType, AddAndEditUser, getUserList } from "./api";
import type { userItem } from "./api";
onMounted(async () => {
  const res = await getUserType();
  radioList.value = res;
  console.log(radioList.value, "radioList");
  await getDataList();
});
import PageHeader from "@/components/PageHeader.vue";
const data = ref([]);
const getDataList = async (tips: boolean = false) => {
  if (tips) {
    ElMessage({
      message: "操作成功",
      type: "success",
    });
  }
  data.value = await getUserList();
};
const dialogShow = ref(false);
const handleAdd = () => {
  dialogShow.value = true;
};
const confirmLoading = ref(false);
const handleCloseDialog = () => {
  formRef.value.resetFields();
  form.value = {};
  dialogShow.value = false;
};
const handleOk = () => {
  // dialogShow.value = false;
  formRef.value.validate(async (valid: any) => {
    if (!valid) return;
    confirmLoading.value = true;
    await AddAndEditUser(form.value);
    confirmLoading.value = false;
    dialogShow.value = false;
    handleCloseDialog();
    await getDataList(true);
  });
};
const form = ref<userItem>({});
const formRef = ref();
const formRules = {
  account: [{ required: true, message: "此项为必填", trigger: "blur" }],
  password: [{ required: true, message: "此项为必填", trigger: "blur" }],
  type: [{ required: true, message: "此项为必填", trigger: "change" }],
};

//方法

const radioList = ref<Array<userItem>>([]);

const handleEditUser = (data) => {
  form.value = JSON.parse(JSON.stringify(data));
  dialogShow.value = true;
};
</script>

<style lang="less" scoped>
.add-button {
  .public-flex-right();
  margin-bottom: 15px;
}
</style>
